<template>
	<swiper
		class="bubbleRow"
		circular
		:vertical="true"
		:autoplay="true"
		:interval="1500"
		:disable-touch="true"
		:display-multiple-items="list.length > 1 ? 2 : list.length"
	>
		<swiper-item v-for="(item, index) in list">
			<view class="bubble" :style="{ backgroundColor: bgc }">
				<image
					class="left"
					:src="item.headUrl ||'http://112.124.50.179:8888/imgs/default_avater.png'"
				></image>
				<view class="center">
					<view>{{ item.nickname }}</view>
					<!-- 跪拜，擦墓碑 除草 -->
					<view
						v-if="
							item.offeringsType == 1 ||
							item.offeringsType == 2 ||
							item.offeringsType == 3 ||
							item.offerType == 1
						"
					>
						进行了{{ item.offeringsName || item.offerName }}
					</view>
					<!-- 购买祭品，购买香油 -->
					<view v-else>供奉了{{ item.offeringsName || item.offerName }}</view>
				</view>
				<view class="right">
					<!-- 跪拜 -->
					<image
						v-if="item.offeringsType == 1 || item.offerType == 1"
						src="http://112.124.50.179:8888/imgs/worship/koubai.png"
						mode="heightFix"
						style="height: 90rpx; margin-right: 20rpx"
					></image>
					<!-- 擦墓碑 -->
					<image
						src="http://112.124.50.179:8888/imgs/home/wipe.png"
						mode="widthFix"
						v-else-if="item.offeringsType == 2"
					></image>
					<!-- 香油 -->
					<image
						src="http://112.124.50.179:8888/imgs/home/jindeng.png"
						mode="widthFix"
						v-else-if="item.offerType == 2"
					></image>
					<!-- 祭品 -->
					<image
						:src="item.offeringsImageUrl || item.offerImageUrl"
						mode="widthFix"
						v-else
					></image>
				</view>
			</view>
		</swiper-item>
	</swiper>
</template>

<script setup>
import { onMounted, ref, reactive, defineProps } from 'vue';
import store from '@/store/index.js';

let props = defineProps({
	list: [{}],
	bgc: {
		default: 'rgba(255, 255, 255, 0.2)'
	}
});
let scrollTop = ref(0); //滚动距离
let scrollTimer = ref(null); //滚动定时器
let scrollStartTime = ref(0); //滚动开始时间
let scrollEndTimer = ref(null); //滚动结束延迟定时器
let isAni = ref(true); //是否开启动画
const userName = ref('');
const headUrl = ref('');

/**
 * 获取个人信息
 */
const getUserInfo = async () => {
	if (!store.state.userInfo.userInfo.phoneNumber) {
		await store.dispatch('setUserInfo');
	}
	headUrl.value =
		store.state.userInfo.userInfo.headUrl ||
		'http://112.124.50.179:8888/imgs/default_avater.png';
	userName.value =
		store.state.userInfo.userInfo.nickname || store.state.userInfo.userInfo.phoneNumber;
};
getUserInfo();

/* 监听是否滚到底部 */
const scrolltolower = (e) => {
	let timer = null;
	clearTimeout(timer);
	isAni.value = false;
	scrollTop.value = 0;
	timer = setTimeout(() => {
		isAni.value = true;
	}, 100);
};
/* 开始滚动 */
const startScroll = () => {
	clearInterval(scrollTimer.value);
	scrollTimer.value = setInterval(() => {
		uni.createSelectorQuery()
			.select('.bubble')
			.boundingClientRect((res) => {
				if (res) {
					scrollTop.value += res.height + uni.upx2px(32);
				}
			})
			.exec();
	}, 1000);
};

const scroll = async (e) => {
	if (!e) {
		await scrolltolower();
		await startScroll();
	} else {
		let timeStamp = e.timeStamp.toFixed(0);
		if (scrollStartTime.value) {
			//判断是自动滚动还是鼠标滚动 是否在定时器的时间范围内
			if (timeStamp - scrollStartTime.value <= 900) {
				clearInterval(scrollTimer.value);
				clearTimeout(scrollEndTimer.value);
				//记录当前的滚动距离
				scrollTop.value = e.detail.scrollTop;
				//重新挂载滚动定时器
				scrollEndTimer.value = setTimeout(() => {
					startScroll();
				}, 1000);
			}
		}
		scrollStartTime.value = timeStamp;
	}
};
onMounted(() => {
	startScroll();
});
</script>

<style lang="scss">
.bubbleRow {
	width: 316rpx;
	height: 230rpx;
	pointer-events: none;
}

.bubble {
	color: #fff;
	position: relative;
	width: 316rpx;
	height: 72rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	margin-top: 30rpx;

	.left {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
	}

	.center {
		padding-left: 16rpx;

		view:nth-child(1) {
			font-size: 24rpx;
			color: #fff;
		}

		view:nth-child(2) {
			font-size: 20rpx;
			color: #fbc438;
		}
	}

	.right {
		position: absolute;
		right: 0;
		bottom: 0rpx;
		// z-index: 99999999;

		image {
			width: 80rpx;
		}
	}
}
</style>
